<!doctype html>
<html lang="zh_en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双向绑定</title>
</head>
<body>
    <!--<input type="text" id="myinput">-->
<div id="div1">
    <form action="">
        <input type="text" id="modInput" value="">
    </form>

    <p id="p_text" v-mod="256"></p>

    <!--<input class="test" type="text" name="asd" onkeyup ="handleChange()" v-model="hey">-->
    <!--<input class="test" type="" name="" onkeyup ="handleChange()" v-model="msg">-->
</div>
</body>

<script>
	/*function watch(obj, key, callback) {

		var old = obj[key];
		Object.defineProperty(obj, key, {
			set: function (val) {
				var oldVal = old;
				old = val;
				callback(val, oldVal, this);
			},
			get: function () {
				return old;
			}
		});
	}
	var input = document.getElementById("modInput");
	var obj = {};
	watch(obj, "input", function (val) {
		input.value = val;
		console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是" + val);
	});
	input.onkeyup = function () {
		obj.input = input.value;
	};*/


	/*var bindingMark = 'data-element-binding'
	function Element (classa, initData) {
		var self     = this,
			el          = self.el = document.getElementsByClassName(classa),//多个input改为class
			bindings = {}
		data      = self.data = {}
		for (var i = 0; i < el.length; i++) {
			content  = el[i].outerHTML.replace(/v-model=\"(.*)\"/g, markToken);
			el[i].outerHTML = content
		}
		for (var variable in bindings) {
			bind(variable);
		}
		if (initData) {
			for (var variable in initData) {
				data[variable] = initData[variable]
			}
		}
		function markToken (match, variable) {
			bindings[variable] = {}
			return  bindingMark + '="' + variable +'"' //内填一个span变为只改它的元素
		}
		function bind (variable) {

			bindings[variable].els = document.querySelectorAll('[' + bindingMark + '="' + variable + '"]')//document获取binding元素
			;
			Object.defineProperty(data, variable, {
				set: function (newVal) {
					[].forEach.call(bindings[variable].els, function (e) {
						bindings[variable].value = e.value = newVal //=>textContent改为input的value
					})
				},
				get: function () {
					return bindings[variable].value
				}
			})
		}
	}

	var app = new Element('test', {
		msg: 'hello',
		hey:'aaa'
	})
	function handleChange(e){ //增加v=>m的绑定
		e = e || window.event
		var key = e.target.outerHTML.match(/data-element-binding=\"(.*)\"/)[1];
		data[key] = e.target.value
		console.log(data.hey,data.msg);
	}*/

    let input = document.getElementById('modInput');
    let div1 = document.getElementById('div1');
//	let inputVal = document.getElementById('modInput').value;
	let text = document.getElementById('p_text');
//	let data = {};

//	bind(data, 'el_1', callback);


    function bind(data, vId, callback) {
		console.log(`start!`);
		data[vId] = inputVal;
		Object.defineProperty(data, vId, {
			set: function (newVal) {
				callback(newVal);
			},
            get: function () {
				debugger
				console.log(data);
	            callback();
	            return data[vId];
            }
        })
    }

	function callback(newVal) {
		input.value = newVal;
		text.innerHTML = newVal;
    }

    function inputChange(el) {
	    data.el_1 = el.target.value;
//	    text = el.target.value;
    }

//    input.addEventListener('input', inputChange)



/*	const mutationObserver = new MutationObserver((mutations, observer) => {
		console.log(observer); // 观察者实例
		console.log(mutations); // 变动数组
		mutations.forEach(function(mutation) {
			console.log(mutation);
            text.innerHTML = mutation.target.getAttribute('v-mod');
            input.value = mutation.target.getAttribute('v-mod');
//
		});
	});

	mutationObserver.observe(text, {
//		attributes: true, // Boolean - 观察目标属性的改变
		characterData: true, // Boolean - 观察目标数据的改变(改变前的数据/值)
//		childList: true, // Boolean - 观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
//		subtree: true, // Boolean - 目标以及目标的后代改变都会观察
		attributeOldValue: true, // Boolean - 表示需要记录改变前的目标属性值
		characterDataOldValue: true, // Boolean - 设置了characterDataOldValue可以省略characterData设置
        attributeFilter: ['v-mod'] // Array - 观察指定属性
    })
	text.setAttribute('v-mod', '44666');


	input.addEventListener('input', changeS)

	function changeS(el) {
		console.log(312);
		text.setAttribute('v-mod', el.target.value);
//		el.target.attr = el.target.value
    }*/






</script>
</html>
